<template>
	<view class="content">
		<view class="line">
			<text class="tits">用户名</text>
			<input type="text" placeholder="请输入用户名" v-model="nickname" />
		</view>
		<view class="line">
			<text class="tits">手机号</text>
			<input type="text" placeholder="请输入手机号" v-model="phone" />
		</view>
		<view class="line get">
			<text class="tits">手机验证码</text>
			<input type="text" placeholder="请输入手机验证码" v-model="code" />
			<view class="getCode" @click="getVeriCode">{{ getCode }}</view>
		</view>
		<view class="line">
			<text class="tits">登录密码</text>
			<input type="password" placeholder="请输入密码" v-model="passwd" />
		</view>
		<view class="line">
			<text class="tits">确认密码</text>
			<input type="password" placeholder="请再次输入密码" v-model="vipass" />
		</view>
		<view class="line">
			<text class="tits">机构代码</text>
			<input type="text" placeholder="请输入机构代码" v-model="agent_id" />
		</view>
		<view class="line-agree">
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="square"> </u-checkbox>
				<text>我已同意</text>
				<text class="needRed">《服务条款》</text>
				及
				<text class="needRed">《风险提示》</text>
			</u-checkbox-group>
		</view>

		<view class="sure-btn" @click="onReg()">确定</view>
		<view class="login-now">
			<text>已有账号？</text><text class="needRed">立即登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: "",
				phone: "",
				code: "",
				passwd: "",
				vipass: "",
				agent_id: "",
				checked: true,
				//
				getCode: "获取验证码",
				getTimes: 120,
				inter: function() {},
			};
		},
		onShow() {
			clearInterval(this.inter);
		},
		onHide() {
			clearInterval(this.inter);
		},
		methods: {
			onReg() {
				var that = this;
				var param = {
					nickname: that.nickname,
					phone: that.phone,
					code: that.code,
					passwd: that.passwd,
					vipass: that.vipass,
					agent_id: that.agent_id,
				};
				if (!that.checked) {
					return uni.showModal({
						showCancel: false,
						content: "请勾选并同意《服务条款》、《风险提示》",
					});
				}
				//////
				that._post("Login/reg", param, function(res) {
					if (res.status != "1") {
						return;
					}
					uni.navigateBack({
						delta: 1,
					});
				});
			},
			/**
			 * 获取验证码
			 */
			getVeriCode() {
				var that = this;
				var param = {
					phone: that.phone
				};
				//////////
				if (that.getTimes != 120) {
					return;
				}
				that._post("Login/getSmsCode", param, function(res) {
					if (res.status != "1") {
						return;
					}
					that.code = res.data;
					that.inter = setInterval(function() {
						that.getTimes = that.getTimes - 1;
						that.getCode = that.getTimes;
						if (that.getTimes < 1) {
							that.getTimes = 120;
							that.getCode = "获取验证码";
							clearInterval(that.inter);
						}
					}, 1000);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		background-color: #000000;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;

		input {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}

		.line {
			height: 100rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 23rpx;
			padding-right: 23px;
			box-sizing: border-box;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			border-bottom: 2rpx solid #272727;

			.tits {
				margin-right: 80rpx;
				width: 160rpx;
				// border: 1px solid red;
			}
		}

		.get {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding-left: 23rpx;
			padding-right: 23px;
			box-sizing: border-box;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			border-bottom: 2rpx solid #272727;

			input {
				// border: 1PX SOLID RED;
				width: 240rpx;
			}

			.getCode {
				width: 160rpx;
				height: 56rpx;
				border: 2rpx solid #db1414;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #db1414;
			}
		}

		.line-agree {
			height: 100rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 23rpx;
			padding-right: 23px;
			box-sizing: border-box;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			border-bottom: 2rpx solid #272727;

			.needRed {
				color: #db1414;
			}
		}

		.sure-btn {
			margin: 0 auto;
			margin-top: 60rpx;
			width: 710rpx;
			height: 88rpx;
			background: #db1414;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.login-now {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #aaaaaa;
			margin-top: 31rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.needRed {
				color: #db1414;
			}
		}
	}
</style>
